var widthofwindow = $(window).width();
widthofwindow = widthofwindow-960;
windowsize = widthofwindow/2;

var backcolor = 0;
var newfigure;
//var armypositions = new Array();
//var armycounter = 0;
$(document).ready(function(){
	if($("#drawcanvas").is("canvas")){
		newFigure();
	}
	if($("#changemap").is("select")){
		changeMapFunction();
	}
	$("#newflag").click(function(){
		Flag();
	});
});


function Flag(){
	var move = true;
	var flagimg = $("<img src='images/flag.png' class='flag'/>");
	flagimg.appendTo("#options");
	$(document).mousemove(function(e){
		if(move == true){
			flagimg.css('left', e.pageX).css('top', e.pageY);
		}
	});
	flagimg.click(function(e){
		if((e.pageX > windowsize && e.pageX < windowsize+960) && (e.pageY >160 && e.pageY < 160 + 804)){
			var x = e.pageX - windowsize + 10;
			var y = e.pageY - 160;
			move = false;
			var name = $("#province").val();
			var mapname = $("#mapname").val();
			$.post('controller/addflagtoprovince.php', {"name" : name, "x": x, "y" : y, "mapname" : mapname});
		}
	});
}

function newFigure(){
	$("#newprovince").unbind("click");
	newfigure = new DrawFigure();
	//a.prototype.data = null;
}

function changeMapFunction(){
	$("#changemap").change(function(e){
	   	 var whatmap  = $("#changemap").val();
		 var imgstring = "<img src='images/" + whatmap + "/mapfront.jpg' width='340px'/>";
		 var expandimg = $("#mapholder img");
		 var vel = 600;
		 var imgelem = $(imgstring);

		 $("#mapholder").html("");
		 imgelem.appendTo("#mapholder");
		
		 imgelem.toggle(
			function(){
				$(this).animate({
					width : 700,
					top : -80,
					left : -420			
				}, vel).css("position" , "relative");
		}, function(){
			$(this).animate({
				width : 340,
				top : 0,
				left : 0
			 }, vel);
		});		
	});

	$( "#datepicker" ).datepicker({ minDate: 0, maxDate: "+24M", dateFormat: 'dd-mm-yy' });
	{  }
	var dateFormat = $( "#datepicker" ).datepicker({ minDate: 0, maxDate: "+24M", option:"dateFormat" });
	$( "#datepicker" ).datepicker( "option", "dateFormat", 'yy-mm-dd ');
	
}


function DrawFigure(){
	var data = null
	var drawcolor = "red"; //line and fill-color
	var start = true; //initiate a new drawing
	var linewidth = 2;
	var mouseX, mouseY; //mouseclick coords
	var xchords = new Array(); //save mouseclick coords
	var ychords = new Array();
	var counter = 0; //hold information of current array value

	//INIT START CANVAS
	var canvas = document.getElementById('drawcanvas');
	cnx = canvas.getContext('2d');
	cnx.strokeStyle = drawcolor;
	cnx.fillStyle = drawcolor;
	cnx.beginPath();
	cnx.lineWidth = linewidth;
	//INIT END CANVAS

	//DRAW NEW LINES START
	$("#drawcanvas").click(function(e){
		
		mouseX = e.pageX - windowsize + 10;
		mouseY = e.pageY - 160;
		if(start){ //init drawing
			cnx.moveTo(mouseX,mouseY);
			start=false;
		}else{ //continue drawing
			cnx.lineTo(mouseX,mouseY);
			cnx.stroke();
			//save chords for each click
			xchords[counter] = mouseX;
			ychords[counter] = mouseY;
			counter++;
		}
	});
	//DRAW NEW LINES END

	//CHANGE COLOR OF LINE/FILL START
	$("#color").change(function(e){
		drawcolor = $("#color option:selected").text();
		cnx.strokeStyle = drawcolor;
	});

	//CHANGE COLOR OF LINE/FILL END
	$("#newprovince").click(function(){
		cnx.strokeStyle = 'black'; //make line black
		cnx.fillStyle = drawcolor;
		cnx.stroke();
		cnx.fill();
		cnx.closePath();

		switch(drawcolor){ //sets color to fit GD-libary.
			case 'Darkblue':
				r = 72; g = 61; b = 139; break;
			case 'Lightblue':
				r = 135; g = 206; b = 250; break;
			case 'Red':
				r = 205; g = 92; b = 92; break;
			case 'Black':
				r = 0; g = 0; b = 0; break;
			case 'Green':
				r = 84; g = 139; b = 84; break;
			case 'White':
				r = 255; g = 255; b = 255; break;
			case 'Yellow':
				r = 255; g = 255; b = 0; break;
			case 'Brown':
				r = 92; g = 51; b = 23; break;
		}
		var name = $("#province").val();//name of drawing, will be used to name finished file and json-file.
		var mapname = $("#mapname").val();
		backcolor += 3;
		var data = { x : xchords, y : ychords, rcol : r, gcol : g, bcol : b, "backcolor" : backcolor}; //info about coords and colors
		//console.debug(data);
		$.post('controller/create_province.php', {chords : data, "name" : name, "mapname" : mapname});
		newFigure(); //close this object and create new object
		return false; //prevent post-function from uploading page
	});
	//FILL AND FINISH LINE END

}